<template>
  <a-modal
    v-model:visible="visible"
    :mask-closable="false"
    width="70vw"
    :title="'提交审批'"
    :title-align="'start'"
    :hide-cancel="true"
    :closable="false"
    @ok="handleOk"
  >
    <div class="module-con">
      <div style="position: relative">
        <div class="module-title">主要信息</div>
        <div style="position: absolute; top: 0; right: 0">
          <a-space>
            <a-dropdown :popup-max-height="false" @select="handleSelect">
              <a-button type="outline">退回拟稿人 <icon-down /></a-button>
              <template #content>
                <a-doption>退回拟稿人</a-doption>
                <a-doption>退回人2</a-doption>
              </template>
            </a-dropdown>
            <a-button type="outline">流程跟踪</a-button>
            <a-button type="outline">关注工作</a-button>
            <a-button type="primary">提交</a-button>
          </a-space>
        </div>
      </div>
      <a-form
        :model="form"
        style="padding: 16px; background: #f7f9fc"
        auto-label-width
      >
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="invoiceNo" label="发票号">
              <span class="span-style">{{ form.invoiceNo }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="invoiceDecimal" label="发票份数">
              <span class="span-style">{{ form.invoiceDecimal }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="invoiceCode" label="发票代码">
              <span class="span-style">{{ form.invoiceCode }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="name" label="发票业务类型">
              <span class="span-style">{{ form.name }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="billType" label="单据类型">
              <span class="span-style">{{ form.billType }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="invoiceType" label="发票类型">
              <span class="span-style">{{ form.invoiceType }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="currencyType" label="币种">
              <span class="span-style">{{ form.currencyType }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="taxRate" label="税率(%)">
              <span class="span-style">{{ form.taxRate }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="exchangeRate" label="汇率">
              <span class="span-style">{{ form.exchangeRate }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="invoiceFlag" label="蓝票/红票">
              <span class="span-style">{{ form.invoiceFlag }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="isSubtract" label="是否补价差">
              <span class="span-style">{{ form.isSubtract }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="invoiceExchange" label="冲抵发票">
              <span class="span-style">{{ form.invoiceExchange }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="supplierCode" label="供应商编码">
              <span class="span-style">{{ form.supplierCode }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="supplierName" label="供应商名称">
              <span class="span-style">{{ form.supplierName }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="supplierSbh" label="供应商纳税人识别号">
              <span class="span-style">{{ form.supplierSbh }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="supplierBack" label="供应商开户行">
              <span class="span-style">{{ form.supplierBack }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="supplierBack" label="供应商银行账号">
              <span class="span-style">{{ form.supplierBack }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="supplierDzdh" label="供应商地址电话">
              <span class="span-style">{{ form.supplierDzdh }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="invoiceUserName" label="开票人">
              <span class="span-style">{{ form.invoiceUserName }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="invoiceDate" label="开票日期">
              <span class="span-style">{{ form.invoiceDate }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="batchLotNo" label="批架次">
              <span class="span-style">{{ form.batchLotNo }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item
              field="commodityBillTaxAmount"
              label="货物发票总金额（含税）"
            >
              <span class="span-style">{{ form.commodityBillTaxAmount }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item
              field="commodityBillAmount"
              label="货物发票总金额（不含税）"
            >
              <span class="span-style">{{ form.commodityBillAmount }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="commodityBillTaxPrice" label="贷款发票总税额">
              <span class="span-style">{{ form.commodityBillTaxPrice }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="agencyFee" label="代理费">
              <span class="span-style">{{ form.agencyFee }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="agencyFeeTax" label="代理费税额（%）">
              <span class="span-style">{{ form.agencyFeeTax }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="agencyFeeTax" label="代理费税额">
              <span class="span-style">{{ form.agencyFeeTax }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="transportSundryMoney" label="运杂费">
              <span class="span-style">{{ form.transportSundryMoney }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="name" label="非订单税额（%）">
              <span class="span-style">{{ form.name }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="transportSundryMoneyTax" label="运杂费税额">
              <span class="span-style">{{ form.transportSundryMoneyTax }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item
              field="invoiceTaxAmount"
              label="发票合计金额（本币含税）"
            >
              <span class="span-style">{{ form.invoiceTaxAmount }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item
              field="invoiceAmount"
              label="发票合计金额（本币不含税）"
            >
              <span class="span-style">{{ form.invoiceAmount }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="6"
            ><a-form-item field="invoiceTaxPrice" label="发票总税额">
              <span class="span-style">{{ form.invoiceTaxPrice }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="operatorUserName" label="编制人姓名">
              <span class="span-style">{{ form.operatorUserName }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="operatorUserDeptName" label="编制人部门">
              <span class="span-style">{{ form.operatorUserDeptName }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="6"
            ><a-form-item field="operatorDate" label="编制日期">
              <span class="span-style">{{ form.operatorDate }}</span>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div class="module-title">列表信息</div>
      <a-table :columns="columns" :data="data"></a-table>
    </div>
  </a-modal>
</template>

<!--新script-->
<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import invoiceDetailTableAdd from '../table-comp/invoice-detail-table-add';

  const columns = ref([]);
  const data = ref([]);
  const form = reactive({
    name: '',
    invoiceNo: '',
    invoiceDecimal: '',
    invoiceCode: '',
    billType: '',
    invoiceType: '',
    currencyType: '',
    taxRate: '',
    exchangeRate: '',
    invoiceFlag: '',
    isSubtract: '',
    invoiceExchange: '',
    supplierCode: '',
    supplierName: '',
    supplierSbh: '',
    supplierBack: '',
    supplierDzdh: '',
    invoiceUserName: '',
    invoiceDate: '',
    batchLotNo: '',
    commodityBillTaxAmount: '',
    commodityBillAmount: '',
    commodityBillTaxPrice: '',
    agencyFee: '',
    agencyFeeTax: '',
    transportSundryMoney: '',
    transportSundryMoneyTax: '',
    invoiceTaxAmount: '',
    invoiceAmount: '',
    invoiceTaxPrice: '',
    operatorUserName: '',
    operatorUserDeptName: '',
    operatorDate: '',
  });
  const visible = ref(true);
  const emit = defineEmits(['handleOk']);
  const handleOk = () => {
    emit('handleOk');
  };
  const handleSelect = (v) => {
    console.log(v);
  };
  data.value = [{ salary: '00' }];
  columns.value = invoiceDetailTableAdd;
</script>

<style lang="less" scoped>
  .module-con {
    height: 70vh;
    // padding: 16px 24px;
  }

  .module-title {
    margin: 20px 0;
    padding-left: 12px;
    color: #1e2228;
    font-weight: 600;
    font-size: 16px;
    border-left: 6px solid #1e89ff;
  }

  /deep/ .arco-form-item-label-col {
    color: #828b9b;
  }

  .span-style {
    color: #1e2228;
  }

  .arco-btn-outline {
    color: #1e2228 !important;
    border-color: #d9dee7 !important;
  }
</style>
